<template>
	<div class="pay">
		<!-- 头部 -->
		<div class="nav_top d-flex jc-between ai-center">
			<div> 
				<el-button type="text" @click="back">
					<div class="iconfont icon-back ml-3 fs-xxxl text-white"></div>
				</el-button>
			</div>
			<div class="fs-xxl pr-3 text-white">
				收银台
			</div>
			<div>
			</div>
		</div>
		<!-- 倒计时与金额 -->
		<div> 
			<div class="text-c text-white d-flex jc-around pt-3 mt-3">
				<div class="d-flex ai-center">
					<div>￥</div>
					<div class="fs-xxxl" style="font-weight: bold;">{{orderInfo.order.totalMoney/100}}</div>
				</div>
				
			</div>
			
			<div class="text-c py-2">
				<CountDown class="text-white fs-xl" :current-time="currentTime" :start-time="startTime" :end-time="endTime" v-on:end_callback="countDownE_cb(3)"
				:tip-text-end="'剩余支付时间'"
				:endText="'订单已关闭'"
				:hourTxt="':'"
				:minutesTxt="':'"
				:secondsTxt="''"
				></CountDown>
				<!-- <van-count-down :time="time">
				  <template v-slot="timeData">
				    <span class="block">{{ timeData.hours }}</span>
				    <span class="colon">:</span>
				    <span class="block">{{ timeData.minutes }}</span>
				    <span class="colon">:</span>
				    <span class="block">{{ timeData.seconds }}</span>
				  </template>
				</van-count-down> -->
			</div>
		</div>
		<!-- 支付提醒 -->
		<div class="alert bg-white mx-2 py-3">
			<div class="fs-xl py-3 px-3">清单已提交</div>
			<div class="text-grey px-3 py-2">清单已提交,请在规定时间内支付备货金,该金额由天院药店进行代收,超时清单自动取消</div>
		</div>
		<!-- 支付商品信息 -->
		<div class="alert bg-white mx-2 py-3 mt-2">
			<div class="d-flex jc-between ai-center text-grey px-3 py-2">
				<div>商品数量</div>
				<div>{{orderInfo.order.totalNum}}</div>
			</div>
			<div class="d-flex jc-between ai-center text-grey px-3 py-2">
				<div>订单编号</div>
				<div class="text-grey">{{orderInfo.order.id}}</div>
			</div>
			<div class="d-flex jc-between ai-center text-grey px-3 py-2">
				<div>订单金额</div>
				<div class="fs-xl text-pink">￥{{orderInfo.order.totalMoney/100}}</div>
			</div>
			
		</div>
		<!-- 支付方式 -->
		<div class="alert bg-white mx-2 py-3 mt-2">
			<div class="px-3 py-2 fs-xl">支付方式</div>
			<div class="px-3 py-2 d-flex ai-center jc-between ai-center border-bottom" @click="tip">
				<div class="d-flex ai-center">
					<div class="fs-big iconfont pr-2">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-weixinzhifu"></use>
						</svg>
					</div>
					<div>
						<div>
							<div>微信</div>
							
						</div>
					</div>
				</div>
				<div> 
					<el-checkbox class="checkbox pr-2" v-model="checkbox1" disabled></el-checkbox>
				</div>
			
			</div>
			<div class="px-3 py-2 d-flex ai-center jc-between border-bottom">
				<div class="d-flex ai-center">
					<div class="iconfont fs-big pr-2">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-zhifubao"></use>
						</svg>
					</div>
					<div>
						<div class="d-flex ai-center">
							<div>支付宝</div>
							<div class="iconfont fs-big pl-2">
								<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-tuijian"></use>
								</svg>
							</div>
						</div>
						<div class="text-grey pt-1 fs-sm">亿万用户的选则</div>
					</div>
				</div>
				<div>
					<el-checkbox class="checkbox pr-2" v-model="checkbox2"></el-checkbox>
				</div>
			
			</div>
		</div>
		<!-- 支付跳转按钮 -->
		<div class="alert mx-2 py-3 mt-2 text-c" style="height: 200px;">
			<el-button type="danger" @click="pay">支付备货金
			</el-button>
		</div>
	</div>
</template>
<script>
import Stomp from 'stompjs'
import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from '../../func/sysconstant.js'
import CountDown from 'vue2-countdown'
import { Toast } from 'mint-ui';
	export default {
		props: ['id'],
		data(){
			return {
				client: Stomp.client(MQTT_SERVICE),
				checkbox1: false,
				checkbox2: true,
				startTime: 0,//剩余开始时间 该时间由创建订单时 后台返回的
				endTime: 0,
				currentTime: 0,
				createTime: 0,
				time: null,

				orderInfo: {
					order: {}
				},
				isPay: true,
				subscription: {}
			}
		},
		methods: {
			tip(){
				Toast('暂未开放~')
			},
			// 倒计时结束 订单取消 删除订单
			async countDownE_cb(){
				console.log(1)
				const res = await this.$http.get(`order/deleteOrderById.do?id=${this.id}`)
				if (res.data.code != 0) {
					this.voicePrompt('订单已超时！');
					this.$router.push('/home')
				}else {
					Toast('网络异常！')
				}
                
                
			},
			back(){
                this.$router.push('/shopCar');
                this.voicePrompt('您有未付款订单 请及时处理！');
			},
			checked(){
				this.checkbox2 = this.checkbox1
                this.checkbox1 = !this.checkbox2
			},
			async getOrederById(){
                 const res = await this.$http.get(`order/findOrderById.do?id=${this.id}`)
				 console.log(res)
                 if (res.data.code != 0) {
                      this.orderInfo = res.data;
                      
                      // var t = new Date(time.replace(/-/g,'/')).getTime(); 
                      this.startTime = (new Date()).getTime();
					  this.createTime = (new Date((this.orderInfo.order.createTime).replace(/-/g,'/'))).getTime();
                      this.endTime = (new Date((this.orderInfo.order.endTime).replace(/-/g,'/'))).getTime();
                      this.currentTime = (new Date()).getTime();
					  this.endTime = this.endTime + 43110000
                      console.log(new Date((this.orderInfo.order.endTime).replace(/-/g,'/')))
                      console.log((new Date((this.orderInfo.order.createTime).replace(/-/g,'/'))).getTime())
					  console.log(new Date())
					  console.log(this.currentTime)
                 }else {
                 	Toast('服务器异常')
                 }

                 
			},
			//
			async pay(){
				// 点击支付 跳转到 支付宝 如果支付成功 改变订单状态 修改的信息 跳转到支付成功页面 订单
				//否则 返回当前页面或者返回/user页
				if (this.checkbox2) {
					window.open(this.orderInfo.order.payUrl)
					/*if (this.isPay) {
						this.$router.push('/paySuccess/'+frame.body.orderId);
						this.voicePrompt('订单支付成功！');
					}else {
						this.voicePrompt('订单支付失败！');
					}*/
				}else {
					Toast('请选择支付方式')
				}
                
				// const res = await this.$http.get('/api/test.html')
					
			},
			//消息中间件
			onConnected: function (frame) {
				
				var topic = '/exchange/paynotify'  
				// ---订阅频道
				this.subscription = this.client.subscribe(topic, this.responseCallback, this.onFailed) 
			},
			onFailed: function (frame) {
				console.log('Failed: ' + frame)
			},
			responseCallback: function (frame) {
				
				// ---接收消息
				if (frame.body) {
					this.voicePrompt('订单支付成功！');
					
					this.$router.push('/paySuccess/'+this.id);
					//停止结束消息
					this.subscription.unsubscribe();
					this.client.disconnect(function() {
						
					});
					this.client.connected = false

				}else {
					this.voicePrompt('订单支付失败！');
					this.client.connected = false
					
				}
			},
			connect: function () {
				// ---初始化mqtt客户端，并连接mqtt服务
				// var clientid = util.uuid()
				var headers = {
					'login': MQTT_USERNAME,
					'passcode': MQTT_PASSWORD,
					// 'client-id': clientid
        // additional header
			    }
			    this.client.connect(headers, this.onConnected, this.onFailed)
			},
			
				


		},
		
		components: {
			CountDown,
		},
		created(){

            this.connect();
            this.getOrederById()

		},
		mounted() {   //在页面创建之前设置body的背景色
			document.querySelector('body').setAttribute('style', 'background: linear-gradient(to bottom,rgba(227, 38, 57,1),rgba(250,250,250,1));height: 58rem;')
		}, 
        beforeDestroy() {   //在页面销毁之前移除body的属性，目的是设置的颜色只对当前页面有效
        	document.querySelector('body').removeAttribute('style')
        },
	}
</script>

<style lang="scss" scoped>

 .alert{
    border-radius: 1%;
 }
 .el-button {
 	width: 98%;
 }
 /* .colon {
     display: inline-block;
     margin: 0 4px;
     color: #000;
   }
   .block {
     display: inline-block;
     width: 22px;
	 border-radius: 2px;
     color: #fff;
     font-size: 12px;
     text-align: center;
     background-color: #000;
   } */
</style>